<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/public/css/main.css">
    <link rel="stylesheet" href="/static/public/css/form.css">
    <script>
        if (window.self == top.window) {
            window.top.location = '/'
        }
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        body>div:first-of-type {
            display: flex;
            width: 95%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 20px 1px rgb(17, 17, 17);
            padding: 10px 15px;
            border-radius: 8px;
            margin-top: 10px;
            gap: 20px;
        }

        body>ul {
            display: flex;
            width: 95%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: transparent;
            padding: 0;
            list-style-type: none;
            gap: 10px;
        }

        body>ul>li {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 20px 1px rgb(17, 17, 17);
            padding: 10px 15px;
            border-radius: 8px;
            width: 100%;
        }
        body>ol {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;
            list-style-type: none;
            gap: 10px;
        }
        body>ol>li {
            color: white;
            backdrop-filter: blur(10px);
            border-radius: 8px;
            padding: 10px;
            font-family: icomoon, sans-serif;
            cursor: pointer;
            text-shadow: rgba(100, 100, 100) 0 0 20px;
            user-select: none;
            box-shadow: 0 0 20px 1px rgb(17, 17, 17);
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        body>ol>li:hover {
            transform: scale(1.05);
            text-shadow: rgba(150, 150, 150) 0 0 5px;
        }
        body>ol>li>input[type="button"]{
            width: fit-content;
            margin-left: 10px;
        }
        #search {
            width: 100%;
            color: white;
            background: rgb(15, 15, 15);
            border: 1px transparent solid;
            box-shadow: inset 0 0 15px 1px rgb(10, 10, 10);
            font-style: oblique;
            letter-spacing: 0.15em;
            text-shadow: rgba(100, 100, 100) 0 0 20px;
            outline: none;
            border-radius: 8px;
            padding: 10px 15px;
            font-size: 0.8em;
            font-weight: 400;
        }

        #search:hover {
            border: 1px rgb(0, 20, 0) solid;
            box-shadow: inset 0 0 15px 1 rgb(0, 20, 0);
            text-shadow: rgba(150, 150, 150) 0 0 5px;
        }

        #search:focus {
            border: 1px rgb(0, 80, 0) solid;
            box-shadow: inset 0 0 15px 1px rgb(0, 80, 0);
            background: rgba(10, 10, 10);
        }
        #submit {
            width: 15%;
        }
        input[type='number'] {
            width: 4em;
            color: white;
            background: rgb(15, 15, 15);
            border: 1px transparent solid;
            box-shadow: inset 0 0 15px 1px rgb(10, 10, 10);
            text-shadow: rgba(100, 100, 100) 0 0 20px;
            outline: none;
            border-radius: 2px;
            padding: 0 10px;
            margin-inline: 5px;
            font-size: 1em;
            font-weight: 400;
        }
        input[type='number']::-webkit-outer-spin-button,
        input[type='number']::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type='number']{
            -moz-appearance: none;
            appearance: none;
        }
        #jump:hover {
            transform: none;
        }
    </style>
</head>

<body>
    <div>
        <input type="search" name="search" id="search" placeholder="输入查询目标标题或作者名称中的文本或符合的正则,为空显示所有">
        <select name="sort" style="width: fit-content;" id="sort">
            <option value="time-down">时间正序(最新)</option>
            <option value="time-up">时间倒序(最老)</option>
            <option value="name-up">名称正序(A-Z)</option>
            <option value="name-down">名称倒序(Z-A)</option>
            <option value="author-up">作者正序(Z-A)</option>
            <option value="author-down">作者倒序(Z-A)</option>
        </select>
        <input type="submit" id="submit" value="查询" class="btn">
    </div>
    <ul><span class="loading"></span></ul>
    <ol></ol>
</body>
<script src="/static/public/js/socket.min.js"></script>
<script src="/static/public/js/GM.js"></script>
<script src="/static/public/js/article_search.js"></script>

</html>